<template>
	<view class="index">
		<view class="title">表单的绑定</view>
		<input type="text" v-model="msg"/>
		<view>{{msg}}</view>
		<switch :checked="isCheck" @change="isCheck=$event.detail.value" />
		<switch type="checkbox"  :checked="isCheck" @change="isCheck=$event.detail.value" />
		<view>学历：{{list2[level]}}</view>
		<radio-group name="" @change="level=$event.detail.value">
			<label v-for="(item,index) in list2">
				<radio :value="index" :checked="level==index" /><text>{{item}}</text>
			</label>
		</radio-group>
		<view>{{isCheck}}</view>
		
		<view class="">
			<view class="title">列表渲染</view>
			<view v-for="(item,index) in list" key="item">{{item}}</view>
			<view v-for="(s,index) in msg" :key="s+index">{{s}}</view>
			<view v-for="(v,k) in person" :key="k">{{k}}:{{v}}</view>
			<view v-for="item in 5" :key="item">{{item}}</view>
			<view class="title">文本渲染</view>
			<view>{{msg}}</view>
			<view v-text="msg"></view>
			<view v-html="raw"></view>
			<view class="title">条件渲染</view>
			<view v-show="isLove">她是我的真爱</view>
			<!-- v-show采用css方式隐藏，v-if直接移除节点 -->
			<view v-if="isLog">欢迎回来主人</view>
			<view v-else>滚去登录</view>
			
			<view v-if="score>=90">奖励🚙</view>
			<view v-else-if="score>=80">得到🏍</view>
			<view v-else-if="score>=70">奖励🚲</view>
			<view v-else-if="score>=60">奖励🛴</view>
			<view v-else>暴打一顿</view>
			<input type="text" v-model.number="score">
			
		</view>
		
		
	</view>
</template>
<script>
	export default{
		data(){
			return {
				msg:"你好uni-app",
				raw:"我<strong>爱</strong>你河南",
				isLove:true,
				isLog:true,
				score:75,
				person:{name:"小郑",age:20,weight:180,height:178},
				list:['react','vue3','小程序'],
				isCheck:true,
				level:1,
				list2:["胎教","幼儿园","小学"]
			}
		},
		methods:{}
	}
</script>
<style scoped lang="scss">
	input{
		height: 66rpx;
		line-height: 66rpx;
		border:1rpx solid #f0f0f0;
		border-radius: 12rpx;
		padding: 0 15rpx;
		margin: 15rpx;
	}
	.title{
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f0f0f0;
		padding: 0 15rpx;
		// border-top: 4rpx solid #f30;
	}
	
</style>